<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="layout-vue-bootstrap">
<head>
    <meta charset="UTF-8">


    <th:block th:fragment="header">
        <style>
            tr.deleted1{
                color:gray;
            }
            input[type=number]{width:60px;}





        </style>
    </th:block>

</head>
<body>

<div class="container-md" id="container" th:fragment="content">
    <div id="app">

        <div class="card">

            <div class="card-header">
                <h3 class="card-title">任务列表 </h3>
            </div>
            <div class="card-body">
                <div>
                    状态：<select v-model="selector.target.status">
                    <option value="">全部</option>
                    <option v-for="o in dictList('task.status')" :value="o.code">{{o.code}} {{o.value}}</option>
                </select>
                     <select v-model="selector.mine">
                         <option value="">不限</option>
                         <option value="1">仅自己</option>
                         <option value="0">仅他人</option>
                     </select>
                    关键词：<input placeholder="名称" v-model="selector.keyword">
                    <button onclick="loadData()">Search</button>
                    <span>
                        <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
                                    <button type="button" class="btn btn-primary btn-outline-dark" @click="selector.target.status=null" >全部</button>
                                    <template v-for="o in dictList('task.status')">
                                        <button type="button"  class="btn btn-outline-dark" @click="selector.target.status= o.code " >{{o.value}}</button>
                                    </template>

                        </div>


                    </span>

                </div>
                <table class="table" style="table-layout:fixed;width:100%;">
                    <tr>
                        <td style="width:40px;">#</td>
                        <td class="text-over w-auto" style2="max-width:80%;">标题</td>
                        <td style="width:66px;">责任人</td>
                        <td style="width:56px;">紧急</td>
                        <td style="width:56px;">状态</td>
                        <td style="width:86px;">预估时间</td>
                        <td style="width:86px;">实际时间</td>
                        <td style="width:66px;">进度</td>
                        <td style="width:180px;">时间</td>
                        <td style="width:180px;"> - </td>
                    </tr>
                    <template v-for="(task,index) in list">
                        <tr @dblclick="task.editing=!task.editing">
                            <td nowrap>{{index+1}}</td>
                            <td  class="text-over w-auto"   data-bs-toggle="tooltip" data-bs-title="Default tooltip" >
                                <a :title2="task.subject" :href="`/pm/task/view?taskId=${task.id}`">{{task.subject}} </a></td>
                            <td nowrap>
                                {{task.ownerUser?.username || task.ownerId}}
                            </td>
                            <td nowrap>{{task.urgent}}级</td>
                            <td nowrap>
                                {{dict("task.status",task.status)?.value}}
                            </td>
                            <td nowrap v-if="!task.editing">
                                {{task.estimatedTime}}
                            </td>
                            <td nowrap v-else>
                                <input type="number" step="1" v-model="task.estimatedTime" @change="update(task)" />
                            </td>
                            <td nowrap>
                            {{task.time}}
                        </td><td nowrap>
                            {{task.progress}}
                        </td>
                            <td nowrap><code>{{new Date(task.createdAt).toLocaleString()}}</code></td>
                            <td nowrap>
                                <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
                                    <button v-if="task.status<4" type="button" class="btn btn-outline-dark" @click="taskLog(task,'start')" >开始</button>
                                    <button v-if="task.status<4" type="button" class="btn btn-outline-dark" @click="taskCommit(task,1)">提交</button>
                                    <button v-else type="button" class="btn btn-warning btn-outline-dark" @click="taskCommit(task,1)">撤销</button>
                                </div>
                            </td>

                        </tr>
                        <tr v-if="task.editing">
                            <td colspan="20">

                            </td>
                        </tr>
                        <tr v-if="1>4">
                            <td colspan="20">

                                <code>提交：{{task.committed}}</code>
                                <code>挂起：{{task.hung}}</code>
                                <code>批准：{{task.approved}}</code>
                                <code>放弃：{{task.giveup}}</code>
                                <code>依赖：{{task.dependent}}</code>
                                <a href="#" @click="taskLog(task,'start')"> 开始</a>
                                <a href="#" @click="taskLog(task,'stop')"> 暂停</a>
                                <a href="#" @click="taskCommit(task,1)"> 提交 </a>
                                <a href="#" @click="taskCommit(task,0)"> 撤销提交 </a>
                                <a href="#" @click="taskHang(task,1)"> 挂起 </a>
                                <a href="#" @click="taskHang(task,0)"> 撤销挂起 </a>
                                <a href="#" @click="taskApprove(task,1)"> 审核 </a>
                                <a href="#" @click="taskApprove(task,0)"> 撤销审核 </a>
                                <a href="#" @click="taskDependent(task,1)"> 依赖 </a>
                                <a href="#" @click="taskDependent(task,0)"> 无需依赖 </a>

                                <div v-if="task.showDetail && task?.logList?.length">
                                    <template v-for="(log,li) in task.logList">
                                        <a><b>{{log.type}}</b> <code v-if="log.createdAt">{{new
                                            Date(log.createdAt).toLocaleString()}}</code></a> |
                                    </template>
                                </div>
                            </td>
                        </tr>

                    </template>

                </table>


            </div>

            <div style="position:fixed;right:10px;bottom:10px;">

            </div>

        </div>
    </div>

</div>

<th:block th:fragment="footer">
    <script>

const { createApp } = Vue;
    var app = createApp({
    data() {
      return {
        list:[], total:0 ,catalogList:[],
        currentIndex : -1,
        selector:{target:{},withLogList:1,pageSize:20,withPrettyActor:1,mine:1}
      }
    },methods:{
        update:function (task){
            var url = "/pm/task/update";
            axios.post(url, task).then(function (response) {
                console.log("response",response)
                loadData();
            }).catch(function (error) {
                console.log("error",error);
                loadData();
            });
        },loadData:function(){
            var selector = this.selector || {}
            axios.post('/pm/task/list', selector).then((response)=> {
                console.log("response",response)
                this.list = response.data.data||[];
                this.total=response.data.total || 0;
                this.catalogList=response.data.dict||[];
            }).catch(function (error) {
                console.log("error",error);
            });
        },taskLog:function(task,type){
            axios.post('/pm/task/log/add?taskId='+task.id+"&type="+type, {}).then((response)=> {
                console.log("response",response)
                this.list = response.data.data||[];
                this.total=response.data.total || 0;
            }).catch(function (error) {
                console.log("error",error);
            });
        },taskCommit:function(task,value){
            axios.post('/pm/task/commit?id='+task.id+"&commit="+value, {}).then((response)=> {
                console.log("response",response)
                this.list = response.data.data||[];
                this.total=response.data.total || 0;
            }).catch(function (error) {
                console.log("error",error);
            });
        },taskApprove:function(task,value){
            axios.post('/pm/task/approve?id='+task.id+"&approve="+value, {}).then((response)=> {
                console.log("response",response)
                this.list = response.data.data||[];
                this.total=response.data.total || 0;
            }).catch(function (error) {
                console.log("error",error);
            });
        },taskHang:function(task,value){
            axios.post('/pm/task/hang?id='+task.id+"&hang="+value, {}).then((response)=> {
                console.log("response",response)
                this.list = response.data.data||[];
                this.total=response.data.total || 0;
            }).catch(function (error) {
                console.log("error",error);
            });
        },taskDependent:function(task,value){
            axios.post('/pm/task/dependent?id='+task.id+"&dependent="+value, {}).then((response)=> {
                console.log("response",response)
                this.list = response.data.data||[];
                this.total=response.data.total || 0;
            }).catch(function (error) {
                console.log("error",error);
            });
        },dictList:function(catalog){
            for(var i=0;i<this.catalogList?.length;i++){
                var ca = this.catalogList[i];
                if(ca.code == catalog){
                    return ca.dictList || [];
                }
            }
            return [];
        },dict:function(catalog,code){
            var cl = this.dictList(catalog);
            for(var i=0;i<cl.length;i++){
                var dc = cl[i];
                if(dc.code==code) return dc;
            }
            return {code:code,value:code};
        }
     },
    watch:{
        selector:{
            handler:function(nv,ov){
                loadData()
            },deep:true
        }
    }
  }).mount('#app');


function loadData( ){
    app.loadData();
}

window.onload=function(){
   loadData( );
}














    </script>
</th:block>
</body>
</html>